import React, { useEffect, useState } from "react";
// 按需导入
import * as echarts from "echarts";

export default function WelcomeSun(props) {
  let { id, list } = props;
  useEffect(() => {
    // 更新阶段
    var reactId = document.getElementById(id);
    var react1 = echarts.init(reactId);
    react1.setOption(option);
  }, [list]);

  const option = {
    title: {
      text: "用户信息管理",
      subtext: "Fake Data",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: list,
        label: {
          show: true,
          position: "outside", //outside 外部显示  inside 内部显示
          formatter: `{d}%`,
          color: "#fff", //颜色
          fontSize: 12, //字体大小
        },
      },
    ],
  };

  return <div id={id} style={{ height: "400px",width: "300px" }}></div>;
}
